import { DualAxes, DualAxesConfig } from '@ant-design/charts';
import { useEffect, useState } from 'react';
import { Card } from 'antd';
import fetchDevFaultStatisticsData from '../mockData/devFaultStatisticsData';
type DataType = {
  manufacturer: string;
  failureNumber: number;
  failureDuration: number;
};

const DevFaultStatistics: React.FC = () => {
  const [data, setData] = useState<DataType[]>([]);
  useEffect(() => {
    const data = fetchDevFaultStatisticsData();
    setData(data);
  }, []);
  const config: DualAxesConfig = {
    appendPadding: 16,
    data: [data, data],
    xField: 'manufacturer',
    yField: ['failureDuration', 'failureNumber'],
    yAxis: [
      {
        position: 'left',
      },
      {
        grid: null,
        position: 'right',
      },
    ],
    geometryOptions: [
      {
        geometry: 'column',
        label: {
          position: 'middle',
        },
      },
      {
        geometry: 'line',
        smooth: true,
        lineStyle: {
          lineWidth: 2,
        },
        label: {
          formatter: (v) => {
            return v.failureNumber.toFixed(2);
          },
          style: {
            fill: '#722ed1',
            fontWeight: 800,
            stroke: '#fff',
            lineWidth: 2,
          },
        },
        color: '#722ed1',
      },
    ],
    meta: {
      failureDuration: {
        alias: '平均故障时长（分钟）/台/月',
      },
      failureNumber: {
        alias: '平均故障次数/台/月',
      },
    },
  };
  return (
    <Card title="设备故障统计" bordered={false} size="small">
      <DualAxes {...config} />
    </Card>
  );
};
export default DevFaultStatistics;
